import React, { useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router'
import { IndexBar, List } from 'antd-mobile'
import { Sidebar, Toast } from 'react-vant';
function index() {

  const nav = useNavigate();
  const back = () => {
    nav(-1);
  }
  const getRandomList = (min: number, max: number): string[] => {
    return new Array(Math.floor(Math.random() * (max - min) + min)).fill('')
  }

  const charCodeOfA = 'A'.charCodeAt(0)
  const groups = Array(26)
    .fill('')
    .map((_, i) => ({
      title: String.fromCharCode(charCodeOfA + i),
      items: getRandomList(3, 10).map(() => `列表项 ${i}-${Math.floor(Math.random() * 10)}`),
    }))

  const [active, setActive] = useState(0)
  return (
    <div style={{
      width: '100vw',
      height: "100vh"
    }}>
      <NavBar onBack={back}>查看全部</NavBar>
      <Sidebar
        value={active}
        onChange={(v) => {
          setActive(v);
        }}
      >
        <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容1">
          <div style={{ height: window.innerHeight }}>

            <IndexBar>
              {groups.map(group => {
                const { title, items } = group
                return (
                  <IndexBar.Panel
                    index={title}
                    title={`标题${title}`}
                    key={`标题${title}`}
                  >
                    <List>
                      {items.map((item, index) => (
                        <List.Item key={index}>{item}</List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                )
              })}
            </IndexBar>
          </div>
        </Sidebar.Item>
        <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容2">
          我是内容区2
        </Sidebar.Item>
        <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容3">
          我是内容区3
        </Sidebar.Item>
      </Sidebar>

    </div>
  )
}

export default index